<template>
  <view class="van-checkbox" :aria-checked="value.indexOf(props.name) >= 0">
    <checkbox
      :value="props.name + ''"
      :disabled="disabledFlag"
      color="var(--color)"
      :checked="value.indexOf(props.name) >= 0">
      <view>
        <slot></slot>
      </view>
    </checkbox>
  </view>
</template>

<script setup>
import { ref, watch, inject, onMounted,computed } from 'vue';

const props = defineProps({
  name: {
    type: [Number, String],
    default: ''
  },
  disabled:{
	  type:Boolean,
	  default:false
  }
});

const checkboxGroup = inject('checkboxGroup', {});
const value = ref(checkboxGroup?.val || []);
const disabledGroup = ref(checkboxGroup?.disabled || false);
watch(
  () => checkboxGroup?.val,
  (newVal) => {
    value.value = newVal;
  }
);

watch(
  () => checkboxGroup?.disabled,
  (newVal) => {
    disabledGroup.value = newVal;
  }
);
const disabledFlag = computed(() => props.disabled||disabledGroup.value);

onMounted(() => {
  if (checkboxGroup?.setAll&&!disabledFlag.value) {
    checkboxGroup.setAll(props.name);
  }
});
</script>

<style lang="scss" scoped>
</style>
